<template>
  <el-dialog v-model="visible" title="导出枚举管理" class="public-dialog" width="1200" draggable @close="close">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-select v-model="form.home_system" placeholder="系统" class="w-40" clearable>
          <el-option v-for="item in systemList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-input v-model.trim="form.name" class="w-40" placeholder="枚举名称" clearable></el-input>
        <el-select v-model="form.status" placeholder="状态" class="w-40" clearable>
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </template>
      <template #toolbar_btns>
        <el-button type="primary" @click="handleOpen('add')">新增</el-button>
      </template>
    </VTable>
  </el-dialog>
  <ComModal ref="ComModalRef" :options="systemList" @query="query"></ComModal>
</template>
<script lang="jsx" setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getExportTag, deleteExportTag } from '../../api/index.js'
import ComModal from './ComModal.vue'
import { overallOptions } from '@/api/public.js'

const visible = ref(false)
const loadings = ref({})

const open = (id) => {
  visible.value = true
}

const user_id = ref(null)


const systemList = ref([])

const statusList = [
  {
    label: '启用',
    value: 1
  },
  {
    label: '禁用',
    value: 2
  },
]

const tableOptins = reactive({
  formConfig: {
    data: {}
  },
  height: 400,
  rowConfig: {
    height: 60
  },
  columns: [
    { field: 'tag_id', title: 'ID', width: 100 },
    {
      field: 'home_system_desc', title: '所属系统'
    },
    { field: 'tag_desc', title: '导出名称' },
    { field: 'name', title: '导出值' },
    {
      field: 'status_desc', title: '状态', width: 95
    },
    {
      field: 'create_time', title: '添加时间'
    },
    {
      field: 'creator', title: '添加人', width: 120
    },

    {
      title: '操作', fixed: 'right', width: 120, slots: {
        default: ({ row }) => {
          return <div class="flex justify-center">
            <el-button class="" type="primary" link onClick={() => handleOpen('edit', row.tag_id)}>编辑</el-button>
            <el-button type="danger" link onClick={() => handleDelete(row.tag_id)}>删除</el-button>
          </div>
        }
      }
    }
  ],

  proxyConfig: {
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: ({ page, form }) => getExportTag({ ...form, ...page })
    }
  }
})

const tableRef = ref()
const query = () => {
  nextTick(() => {
    tableRef.value.query()
  })
}

const close = () => {
  visible.value = false
}
defineExpose({ open })

const getOptions = async () => {
  try {
    const res = await overallOptions()
    systemList.value = res.data.home_system
  } catch (e) {
    throw Error(e)
  }
}
onMounted(() => {
  user_id.value = window.userInfo?.user?.user_id
  console.log(user_id.value)
  getOptions()
})

const ComModalRef = ref()
const handleOpen = (type, id) => {
  ComModalRef.value.open(type, id)
}

const handleDelete = async (id) => {
  ElMessageBox.confirm('是否确认删除该配置', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
    .then(async () => {
      try {
        const res = await deleteExportTag(id)
        ElMessage.success('操作成功')
        query()
      } catch (e) {
        throw Error(e)
      }
    })
    .catch(() => { })

}
</script>
<style lang="scss"></style>